<template>
  <div>
    <!-- <h2>关注</h2> -->
    <div class="fb" @click="ft($event,item.pid)" v-for="item in list" :key='item.id'>
      <div class="head">
        <div class="left">
          <span class="yuan">
            <img :src="item.head" alt>
          </span>
          <div class="yhm">
            <p>{{item.name}}</p>
            <p>{{item.time}}个小时前</p>
          </div>
        </div>
        <button class="btn" @click="fd($event)" ref="btn">已关注</button>
      </div>
      <div class="ly">
        <p
          class="pd"
        >{{item.text}}</p>
      </div>
      <div class="img">
        <img :src="item.img" alt>
      </div>
      <div class="fxs">
        <button class="fxsh">分享生活</button>
      </div>
      <span class="xian"></span>
      <van-row type="flex" justify="space-between" class="van">
        <van-col span="6">
          <van-icon size="3em" name="comment-circle-o"/>
        </van-col>
        <van-col span="6">
          <van-icon size="3em" name="thumb-circle-o"/>
        </van-col>
        <van-col span="6">
          <van-icon size="3em" name="upgrade" @click="tanchu()"/>
        </van-col>
      </van-row>
      <span class="common"></span>
    </div>

    <van-popup v-model="show" position="bottom">
      <share :config="config"></share>
    </van-popup>

    
  </div>
</template>

<script>
  import axios from "axios";

  export default {
  name: "Attention",
  data() {
    return {
      list:[],
      show: false,
      config: {
        url: "http://www.baidu.com", // 网址，默认使用 window.location.href
        source: "", // 来源（QQ空间会用到）, 默认读取head标签：<meta name="site" content="http://overtrue" />
        title: "hello", // 标题，默认读取 document.title 或者 <meta name="title" content="share.js" />
        description: "hi", // 描述, 默认读取head标签<meta name="description" content="PHP弱类型的实现原理分析" />
        image: "", // 图片, 默认取网页中第一个img标签
        sites: ["qzone", "qq", "weibo", "wechat", "douban"], // 启用的站点
        disabled: [], // 禁用的站点
        wechatQrcodeTitle: "微信扫一扫：分享", // 微信二维码提示文字
        wechatQrcodeHelper:
          "<p>微信里点“发现”，扫一下</p><p>二维码便可将本文分享至朋友圈。</p>"
      },
      fs: true
    };
  },
  methods: {
    ft(e,pid) {
      if (
        e.target.className == "yuan" ||
        e.target.className == "fxsh" ||
        e.target.className == "btn" ||
        e.target.className == "van-icon van-icon-thumb-circle-o" ||
        e.target.className == "van-icon van-icon-upgrade" ||
        e.target.className == "van-icon van-icon-comment-circle-o"
      ) {
        !this.$router.push("");
      } else {
        this.$router.push("/dynamicdetails/"+pid);
      }
    },
    tanchu() {
      this.show = true;
    },
    fd(a) {
      if (this.fs) {
        a.target.innerHTML = "+关注";
        this.fs = false;
      } else {
        a.target.innerHTML = "已关注";
        this.fs = true;
      }
    }
  },
   mounted() {
    var _this = this;
    axios({
      url: "http://www.jindong.com/api"
    }).then(function(data) {
      _this.list=data.data.list
    });
  }
};
</script>

<style scoped>
.common {
  display: block;
  height: 15px;
  background: #ccc;
}
.fb {
  text-align: center;
  border-top: 1px solid rgba(187, 187, 187, 1);
}
.head {
  display: flex;
  height: 94px;
  justify-content: space-around;
  align-items: center;
}
.head .left {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.head .yuan {
  display: block;
  width: 49px;
  height: 49px;
  border: 1px solid rgba(187, 187, 187, 1);
  border-radius: 50%;
}
.head .yuan img {
  width: 49px;
  height: 49px;
  border-radius: 50%;
}
.head .yhm {
  margin-left: 10px;
}
.head .yhm p:nth-of-type(1) {
  height: 4px;
  color: rgba(16, 16, 16, 1);
  font-size: 14px;
  text-align: left;
  font-family: Arial-regular;
}
.head .yhm p:nth-of-type(2) {
  height: 14px;
  color: rgba(155, 155, 155, 1);
  font-size: 12px;
  text-align: left;
  font-family: Arial-regular;
   margin-top:14px;
}
.head .btn {
  width: 58px;
  height: 22px;
  border-radius: 4px;
  color: rgba(16, 16, 16, 1);
  font-size: 12px;
  text-align: center;
  font-family: Arial;
  border: 1px solid rgba(187, 187, 187, 1);
}
.img {
  margin: 5px 25px;
}
.img img {
  width: 90px;
  height: 94px;
  margin: -2px;
  padding: 0;
}
.ly {
  line-height: 20px;
  margin-bottom: 10px;
}
.pd {
  line-height: 20px;
  color: rgba(136, 136, 136, 1);
  font-size: 14px;
  text-align: left;
  font-family: Microsoft Yahei;
  border: 1px solid rgba(255, 255, 255, 0);
  margin: 0px 25px;
}
.fxs {
  height: 26px;
  line-height: 26px;
  color: rgba(16, 16, 16, 1);
  font-family: Arial;
}
.fxsh {
  width: 80px;
  height: 26px;
  line-height: 26px;
  color: rgba(16, 16, 16, 1);
  font-size: 12px;
  text-align: center;
  font-family: Arial;
  border: 1px solid rgba(187, 187, 187, 1);
  margin-left: -190px;
}
.xian {
  display: block;
  height: 1px;
  background: #aaa;
  margin: 12px 0;
}
</style>
